<template>
 <view class="uni-container">
   <view class="image-container">
     <image class="uni-image" mode="aspectFill" 
	 :src="shopInfo && shopInfo.cover ? baseUrl+shopInfo.cover :'/static/icon/top.jpg'">
     </image>
     <image class="uni-image-icon" mode="aspectFill" :src="shopInfo && shopInfo.icon ? baseUrl+shopInfo.icon :'/static/icon/menu.png'">
     </image>
     <text class="uni-text-title">{{shopInfo && shopInfo.name ? shopInfo.name:''}}</text>
     <text class="uni-text-desc">{{shopInfo && shopInfo.signboard ? shopInfo.signboard:''}}</text>
   </view>
   <view class="uni-search">
      <input v-model="searchParam.menuName" class="uni-input" placeholder="搜索" placeholder-style="color:#B9A99C;font-size:14px;"
      @confirm="getMenu"/>
     <uni-icons class="search-icon" color="#CCCCCC"  type="search" size="18" style="width: 14px;height: 18px;"></uni-icons>
   </view>
   <view class="uni-menu-title">
     <image src="/src/static/icon/panzicai.png" style="width: 50px;height: 50px;"></image>
   </view>
   <view class="uni-menu">
     <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
                  @scrolltolower="lower" @scroll="scroll"
                  refresher-enabled="true"  :refresher-triggered="triggered"
                  :refresher-threshold="100" @refresherpulling="onPulling"
                  @refresherrefresh="onRefresh" @refresherrestore="onRestore"
                  @refresherabort="onAbort">
       <view class="menu-list" v-for="(item,index) in menuList" :key="index" :index="index">
         <image @click="previewImageBtn(baseUrl+item.menuImg)" :src="baseUrl+item.menuImg" class="menu-icon"  mode="aspectFill"/>
         <view class="menu-info">
           <view class="menu-name">
             <text class="menu-info-text">{{item.menuName}}</text>
           </view>
           <view class="menu-desc">
             <text class="menu-info-text"  style="font-weight:normal;font-size: 12px;color: gray;">已售:{{item.salesVolume ? item.salesVolume:0}}</text>
             <text class="menu-info-text"  style="font-weight:normal;font-size: 12px;color: gray;">{{item.price}} 元/份</text>
           </view>
         </view>
         <view class="menu-info-icon">
           <uni-icons v-if="item.fire" class="fire-icon"
                      type="fire-filled" color="#951D1D"
                      size="15"></uni-icons>
           <view class="menu-icon-2">
             <image @click="addCartBtn(item)"  class="cart-icon" src="/static/icon/cartadd.png" v-if="!item.quantity || item.quantity == 0"
                    mode="scaleToFill"     style="width: 25px;height: 25px;"></image>
             <image  @click="openMenu" class="cart-icon" src="/static/icon/cartplus.png"  v-if="item.quantity > 0"
                     mode="scaleToFill"   style="width: 25px;height: 25px;"></image>
             <view  v-if="item.quantity"  class="dot-red">{{item.quantity}}</view>
           </view>
         </view>
       </view>
     </scroll-view>
   </view>
   <view class="uniui-bottom" v-if="cartList.length > 0">
     <view class="choose-menu-btn" @click="openMenu">
       <text>已选</text>
       <text>菜单</text>
     </view>
     <view class="chart-menu" v-if="menuShow">
       <scroll-view scroll-y="true" style="height: 100%;">
         <view class="menu-item" v-for="(item,index) in cartList" :key="index" :index="index">
           <image  :src="baseUrl+item.menuImg" class="menu-item-img" mode="aspectFill"></image>
           <text class="menu-text">{{item.menuName}}</text>
           <view class="menu-input">
             <uni-easyinput  v-model="item.quantity"   @iconClick="iconClick(item,$event)" suffix-icon="arrow-up" prefix-icon="arrow-down" type="number"
                             style="text-align: center;" ></uni-easyinput>
           </view>
           <text  class="menu-text">合计：{{item.total}} </text>
           <uni-icons @click.stop="removeCart(item)" color="#665c37" type="trash"></uni-icons>
         </view>
       </scroll-view>
       <view class="menu-foot">
         <text style="font-size: 16px;font-weight: bolder">合计：{{heji}} 元</text>
         <view class="menu-botton">
           <button size="mini" class="menu-botton-btn" @click.stop="addMenuOrder">
             <uni-icons color="#4095E5" type="wallet"></uni-icons>
             添加订单
           </button>
           <button  size="mini" class="menu-botton-btn" @click.stop="removeChartAll">
             <uni-icons color="#D1BF70" type="trash"></uni-icons>
             清空
           </button>
         </view>
       </view>
     </view>
   </view>
</view>
</template>

<script setup lang="ts">
import {onLaunch, onLoad} from '@dcloudio/uni-app'
import { ref } from 'vue'
import {page} from '@/api/appmenu'
import {info} from '@/api/shopinfo'
import {baseUrl} from '@/api/request'
import {count, save} from '@/api/menuorder'
import { checkCompatEnabled } from '@vue/compiler-core'
const previewImageBtn=(url)=>{
  uni.previewImage({
    urls: [url],
    longPressActions: {
      itemList: ['发送给朋友', '保存图片', '收藏'],
      success: function(data) {
        console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
      },
      fail: function(err) {
        console.log(err.errMsg);
      }
    }
  });
}
const tableNumber=ref()
onLoad((query)=>{
	 const scene = decodeURIComponent(query.scene)
	 if(scene!=undefined && scene!='undefined'){
     console.log("直接扫码二维码进来的:",scene)
     paramsGet(scene)
	 }else{
     //判断是否是点击扫码点餐进来的
     uni.getStorage({
       key:'scancode',
       success:function (res) {
         console.log("扫码点餐参数:",res)
         if (res.data){
           console.log("dd,"+res.data)
           paramsGet(res.data)
         }
       },
       fail(err){
         uni.removeStorage({
           key:'tableNumber'
         })
         uni.removeStorage({
           key:'shopId'
         })
         uni.reLaunch({
           url:'/pages/scancode/index'
         })
       }
     })
	 }
   noPayNum()
})
const paramsGet=(scene)=>{
  const params = {};
  scene=decodeURIComponent(scene)
  const pairs = scene.split('&');

  pairs.forEach(pair => {
    const [key, value] = pair.split('=');
    params[key] = value;
  });
  console.log("asasa:"+params.shopId)
  if(params.shopId){
	searchParam.value.shopId=parseInt(params.shopId)
    getShopInfo(params.shopId)
  }
  if(params.tableNumber){
    tableNumber.value = params.tableNumber
    uni.setStorage({
      key:'tableNumber',
      data:params.tableNumber
    })
  }
}
const shopInfo=ref()
const getShopInfo=(shopId)=>{
	info(shopId).then(res=>{
		if(res.code == 200){
			shopInfo.value=res.data;
			searchParam.value.shopId=parseInt(shopId)
			uni.setStorage({
				key:'shopId',
				data:shopId
			})
		}
	})
}
const scrollTop=ref()
const upper=(e)=> {
  console.log(e)
}
const lower=(e)=>{
  console.log("底部",e)
  if (menuList.value.length < total.value){
    searchParam.value.page++;
    getMenu()
  }
}
const menuShow = ref(false)
const openMenu=()=>{
  menuShow.value=!menuShow.value;
}
const triggered=ref(false)
onLoad( ()=>{
  triggered.value = true;
})

const onPulling=(e)=> {
  triggered.value=true;
}
const onRefresh=()=> {
  triggered.value=true;
  searchParam.value.page=1;
  getMenu()
  triggered.value = false; // 需要重置
}
const onRestore=()=> {
  triggered.value = false; // 需要重置
}
const onAbort=()=> {
  triggered.value = false; // 需要重置
}

const searchParam=ref({
  menuName:'',
  page:1,
  limit:10,
})
const total=ref(0)
const menuList=ref([])
const getMenu= ()=>{
  page(searchParam.value).then(res=>{
    if (searchParam.value.page > 1){
      menuList.value=menuList.value.concat(res.data.list)
    }else{
      menuList.value=res.data.list;
    }
    total.value=res.data.total;
	cartList.value=[]
    uni.getStorage({
      key: 'cartList',
      success: function (res2) {
        cartList.value=res2.data
		console.log("你好00",cartList.value)
        if (cartList.value.length && cartList.value.length > 0){
          cartList.value.forEach(cart=>{
            menuList.value.forEach(menu=>{
              if (cart.id === menu.id){
                menu.quantity=cart.quantity;
                return;
              }
            })
          })
        }
      },
      fail: function (res2) {
        console.log("err:"+JSON.stringify(res2))
      }
    });
    uni.getStorage({
      key:'chartHj',
      success:function (res3){
        heji.value = res3.data;
      }
    })
  });
}
//添加购物车
const cartList = ref([])
const heji=ref(0)
const addCartBtn=(item)=>{
  if(!cartList.value || cartList.value instanceof Object){
	   console.log("添加前2222",cartList.value)
	cartList.value=[]
  }
  item.quantity=1;
  item.total=item.price*item.quantity
   console.log("添加前",cartList.value)
  cartList.value.push(item)
  heji.value=0;
  cartList.value.map(item=>{
    heji.value=heji.value+item.price*item.quantity
  })
  console.log("添加",cartList.value)
  uni.setStorage({
    key:'cartList',
    data:cartList.value
  })
  uni.setStorage({
    key:'chartHj',
    data:heji.value
  })
}
const removeCart=(item)=>{
  item.quantity=0;
  item.total=item.price*item.quantity
  cartList.value.splice(cartList.value.indexOf(item),1)
  heji.value=0;
  cartList.value.map(item=>{
    heji.value=heji.value+item.price*item.quantity
  })
  if(cartList.value.length>0){
    uni.setStorage({
      key:'cartList',
      data:cartList.value
    })
  }else{
    uni.removeStorage({key:'cartList'})
  }
  if (heji.value > 0){
    uni.setStorage({
      key:'chartHj',
      data:heji.value
    })
  }else{
    uni.removeStorage({key:'chartHj'})
  }
}
const removeChartAll=()=>{
  cartList.value.map(item=>{
    item.quantity=0;
    item.total=item.price*item.quantity
    heji.value=heji.value+item.price*item.quantity
  })
  uni.removeStorage({key:'cartList'})
  cartList.value =[]
  heji.value=0;
  getMenu();
}
const iconClick=(item,type)=>{
  if (type == 'prefix'){
    if(item.quantity > 1){
      item.quantity--;
    }else{
      item.quantity=1;
    }
  }else if (type == 'suffix'){
    item.quantity++;
  }
  item.total=item.price*item.quantity
  heji.value=0;
  cartList.value.map(item=>{
    heji.value=heji.value+item.price*item.quantity
  })
  if(cartList.value.length>0){
    uni.setStorage({
      key:'cartList',
      data:cartList.value
    })
  }else{
    uni.removeStorage({key:'cartList'})
  }
  if (heji.value > 0){
    uni.setStorage({
      key:'chartHj',
      data:heji.value
    })
  }else{
    uni.removeStorage({key:'chartHj'})
  }
}
const addMenuOrder=()=>{
  cartList.value.forEach(item=>{
    const form={
      menuId:item.id,
      quantity:item.quantity,
      price:item.price,
      total:item.total,
      tableNumber:tableNumber.value,
	  orderStatus:'0'
    }
    save(form).then(res=>{
      if (res.code==200){
        uni.removeStorage({key:'cartList'})
        uni.removeStorage({key:'chartHj'})
        cartList.value=[]
        heji.value=0;
        searchParam.value.page=1;
        getMenu()
        noPayNum()
      }
    })
  })
}
//获取未付款订单数量
const noPayNum=()=>{
  //未付款订单显示小红点
  count({"orderStatus":"0"}).then(res=>{
    if(res.code == 200){
      if (res.data > 0){
        uni.setTabBarBadge({
          index:2,
          text:res.data+'',
        })
      }else{
        uni.removeTabBarBadge({
          index:2
        })
      }
    }
  })
}
</script>

<style lang="scss">
.menu-icon-2{
  display: flex;
  position: absolute;
  bottom: 0px;
}
.menu-botton-btn{
  //background-color: #967A54;
  background-color: #bce2ff;
  border-color: #bce2ff;border: 1px solid #bce2ff;
  font-weight: bolder;
}
.menu-foot{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color:#d48d00;
  margin-top: 5px;
  margin-bottom: 3px;
  font-size: 14px;
}
.menu-botton{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.menu-botton button{
  color:#B5A74F;
  font-weight: bolder;
  font-size: 12px;
  margin-left: 5px;
}
.menu-item{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  font-size: 14px;
  font-weight: normal;
  color:black;
  margin-bottom: 8px;
}
.menu-text{
  width: 25%;text-align: center;
  font-weight: bold;
}
.menu-input{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 35%;
}
.menu-item-img{
  width: 20%;
  height: 10vh;
  border-radius: 2px;
}
.chart-menu{
  background-color:  white;
  height: auto;
  padding: 10px;
  border-radius: 2px;
  line-height: 25px;
}
.choose-menu-btn{
  background-color: #caa125;
  width: 35px;
  height: 35px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  padding: 5px;
  border-radius: 50%;
  color:white;
  font-weight: bold;
  border: 2px solid #caa125;
  justify-content: center;
  margin-left: 42%;
}
.uniui-bottom{
  position: absolute;
  bottom: 0px;
  width: 100%;
  display: flex;
  flex-direction: column;
}


.uni-container{
  background-color: #C9B9AA;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0px;
  top: 0px;
  bottom: 0px;
  right: 0px;
}
.scroll-Y {
  width: 100%;
  height:99%;
}
.uni-menu{
  height: 65%;
  width: 90%;
  margin-top: 2%;
}
.menu-list{
  background-color: whitesmoke;
  border-radius: 5px;
  width: 100%;
  height: 24%;
  margin-bottom: 2%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  position: relative;
  padding: 5px;
}
.dot-red{
  position: absolute;
  right: 0px;
  top:0px;
  color: white;
  font-size: 8px;
  width: 12px;
  height: 12px;
  background-color: #D04E20;
  text-align: center;
  border-radius: 50%;
}
.menu-icon{
  width: 30%;
  height: 90%;
  margin-left: 2%;
  border-radius: 5px;
}
.menu-info{
  display: flex;
  flex-direction: column;
  width: 60%;
  height: 90%;
  justify-content: space-evenly;
  margin-left: 5px;
  margin-bottom: 5px;
}
.menu-name{
  width: 100%;
}
.menu-desc{
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}
.menu-info-icon{
  padding: 5px;
  width: 10%;
  height: 80%;
  position: absolute;
  top: 4%;
  right: 3%;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
}
.menu-info-text{
  color: #566B4C;
  font-size: 14px;
  width: 50%;
  font-weight: bold;
}
.uni-menu-title{
  color: #566B4C;
  font-weight: bolder;
}
.image-container{
  position: relative;
  width: 95%;
  height: 20%;
}
.uni-search{
  width:95%;
  height: 10%;
  // background-color: #667E5A;
  margin-top: 2%;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.uni-input{
  background-color: #FFFFFF;
  border-radius: 5px;
  width: 92%;
  height: 66%;
  text-align: center;
  position: relative;
}
.search-icon{
  position: absolute;
  left: 40%;
}
.uni-image{
  width: 100%;
  height: 100%;
  margin-top: 1%;
  border-radius: 3px;
}
.uni-image-icon{
  border-radius: 50%;
  width: 65px;
  height: 63px;
  position: absolute;
  left: 6%;
  top:15%;
}
.uni-text-title{
	color: #566B4C;
  font-weight: bolder;
  font-size: 14px;
  position: absolute;
  left: 28%;
  top:35%;
}
.uni-text-desc{
	color: #83a374;
  font-weight: bolder;
  font-size: 14px;
  position: absolute;
  right: 5%;
  top:35%;
}
</style>
